<template>
  <view>
    <view class="w100 rowsb rowsm pl-24 pr-24">
      <view class="w-352 h-80 rowsc rowsm" :style="active == 0 ? 'background-color: #F7F6FA;color:#4878FF;' : 'background-color: #fff;color:#888;'" :class="{'fw-b fs-30':active == 0,'fs-28':active != 0}" @click="active = 0,getList()">待审批</view>
      <view class="w-352 h-80 rowsc rowsm" :style="active == 1 ? 'background-color: #F7F6FA;color:#4878FF;' : 'background-color: #fff;color:#888;'" :class="{'fw-b fs-30':active == 1,'fs-28':active != 1}" @click="active = 1,getList2()">督促</view>
    </view>
    
    <view class="w100 h-124 pl-24 pr-24" v-if="active == 0">
      <scroll-view scroll-x="true" style="white-space: nowrap;" class="w100 h100">
        <view class="rows rowsm h100">
          <view class="pl-20 pr-20 h-52 rowsc rowsm br-26 fs-26 mr-20" style="" v-for="(item,index) in tab2"
            :key="index"
            :style="active2 == index ? 'color: #fff;background: linear-gradient(to bottom,#4897FF,#4878FF);' : 'background-color: #F4F4F4;color: #666;'"
            @click="changeTab(index)">{{item}}</view>
        </view>
      </scroll-view>
    </view>
    
    <view class="w100 pl-24 pr-24" v-if="active == 0">
      <view class="w100 rowsb rowsm p-all-28 br-20 mb-20" style="background-color: #F7F6FA;" v-for="(item,index) in list" :key="index" @click="$tools.goNext('/pagesCopy/index/workDetail?id=' + item.id + '&index=' + active2)">
        <view class="rowscl">
          <view class="fs-30 fw-b col333 mb-32" v-if="active2 == 0">{{item.name}}</view>
          <view class="fs-30 fw-b col333 mb-32" v-else>{{item.name ? item.name : tab2[active2]}}</view>
          <view class="fs-26 col888">分类: {{tab2[active2]}} <text v-if="active2 == 0">  <!-- {{tab3[active3].name}} --> / {{item.type == 1 ? '宿舍/教/实验劳动' : item.type == 2 ? '校内公共区劳动' : item.type == 3 ? '学校服务资源劳动' : item.type == 4 ? '劳动报告心得体会' : item.type == 5 ? '大学生创新创业' : item.type == 6 ? '互联网+报告' : item.type == 7 ? '演讲比赛/知识竞赛' : item.type == 8 ? '劳动执行/文明宿舍' : item.type == 9 ? '公益活动' : item.type == 10 ? '科技帮扶报告' : item.type == 11 ? '劳动周报告' : ''}}</text> </view>
        </view>
        <view class="rowscl" style="align-items: flex-end;">
          <view class="w-144 h-60 rowsc rowsm fw-b fs-26 mb-22 br-30" style="color: #FF9934;border: 2rpx solid #FF9934;">{{item.status == 1 ? '未审批' : item.status == 2 ? '已审批' : '已驳回'}}</view>
          <view class="fs-26 col888">{{item.createTime || ''}}</view>
        </view>
      </view>
    </view>
    
    
    <view class="w100 pl-24 pr-24 pt-20" v-if="active == 1">
      <view class="w100 p-all-30 br-10 rowscl mb-20" style="background-color: #F7F6FA;" v-for="(item,index) in list2" :key="index">
        <view class="fs-28 col333 fw-b mb-20">{{item.title}}</view>
        <view class="w100 rowsb rowsm fs-24 col888">
          <view class="">{{item.content}}</view>
          <view class="">{{item.createTime}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        active:0,
        active2:0,
        tab2: ['基础劳动','劳动总结报告','劳动成果','社会公益劳动'],  //'全部',
        list:[],
        list2:[],
         total:0,
        limit: {
          pageNum: 1,
          pageSize: 10},
      };
    },
    onLoad() {
      this.getList()
      this.getList2()
    },
      // 下拉到底部后加载新数据
    onReachBottom() {
      if (this.list.length < this.total) {
        this.limit.pageNum++;
        this.getList()
      }
    },
    onPullDownRefresh() {
      this.limit.pageNum = 1
      this.getList()
    },
    methods:{
      changeTab(index){
        this.limit.pageNum = 1
        this.active2 = index
        this.getList()
      },
      getList2(){
        this.$tools.axiosFromToken('POST','prouserdc/listTer',{},'加载中').then(res => {
          if(res.code != 200) return this.$tools.showtt(res.msg)
          let {rows} = res
          this.list2 = rows
        })
      },
      getList(){
        if(this.active2 == 0){
          this.$tools.axiosFromToken('POST',`prold/terListMsg?pageNum=${this.limit.pageNum}&pageSize=${this.limit.pageSize}`,{},'加载中').then(res => {
            if(res.code != 200) return this.$tools.showtt(res.msg)
            this.total = res.total
            if (this.limit.pageNum == 1) {
              this.list = res.rows;
            } else {
              this.list = [...this.list, ...res.rows];
            }
          })
        }
        if(this.active2 == 1){
          this.$tools.axiosFromToken('POST',`proldzj/terListMsg?pageNum=${this.limit.pageNum}&pageSize=${this.limit.pageSize}`,{},'加载中').then(res => {
            if(res.code != 200) return this.$tools.showtt(res.msg)
            this.total = res.total
            if (this.limit.pageNum == 1) {
              this.list = res.rows;
            } else {
              this.list = [...this.list, ...res.rows];
            }
          })
        }
        if(this.active2 == 2){
          this.$tools.axiosFromToken('POST',`proldcg/terListMsg?pageNum=${this.limit.pageNum}&pageSize=${this.limit.pageSize}`,{},'加载中').then(res => {
            if(res.code != 200) return this.$tools.showtt(res.msg)
             this.total = res.total
            if (this.limit.pageNum == 1) {
              this.list = res.rows;
            } else {
              this.list = [...this.list, ...res.rows];
            }
          })
        }
        if(this.active2 == 3){
          this.$tools.axiosFromToken('POST',`proldgy/terListMsg?pageNum=${this.limit.pageNum}&pageSize=${this.limit.pageSize}`,{},'加载中').then(res => {
            if(res.code != 200) return this.$tools.showtt(res.msg)
              this.total = res.total
            if (this.limit.pageNum == 1) {
              this.list = res.rows;
            } else {
              this.list = [...this.list, ...res.rows];
            }
          })
        }
      }
    }
  }
</script>

<style lang="scss">
page {
  background-color: #fff;
}
</style>
